<template>
  <div class="check-info">
    <p>若信息识别错误可手动修改，否则将无法通过校验</p>
    <van-form @submit="onSubmit">
      <!-- <div style="float: left"> -->
      <van-row>
        <van-col span="16">
        <van-field
          label-width="4em"
          v-model="cardInfo.name"
          name="姓名"
          label="姓名"
          placeholder="姓名"
          required
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        </van-col>
        <van-col span="8">
          <img
            class="avatar"
            :src="avatar"
          />
        </van-col>
      </van-row>
        <van-field name="radio" label="性别" label-width="4em" input-align="left">
          <template #input>
            <van-radio-group v-model="cardInfo.gender" direction="horizontal" disabled>
              <van-radio name="1">男 </van-radio>
              <van-radio name="2">女 </van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          label-width="4em"
          readonly
          clickable
          name="calendar"
          v-model="cardInfo.birth"
          label="出生日期"
          placeholder="点击选择日期"
          @click="showCalendar = true"
        />
        <van-calendar v-model="showCalendar" @confirm="onConfirm" />
      
        <van-field
          label-width="4em"
          v-model="cardInfo.address"
          name="联系地址"
          label="联系地址"
          type="textarea"
          placeholder="联系地址"
          :rules="[{ required: true, message: '请填写联系地址' }]"
        />
        <van-field
          label-width="4em"
          v-model="cardInfo.idCardNo"
          name="身份证号"
          label="身份证号"
          placeholder="身份证号"
          required
          :rules="[
            { required: true, message: '请输入身份证' },
            { validator: idCardValidator, message: '身份证号码格式错误！' }
          ]"
        />
      <!-- </div> -->
      
        <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">下一步</van-button>
      </div>
    </van-form>
    
    
    <div>如身份证信息核对无误，请点击下一步</div>
    <!-- <div class="avatar"> -->
      
    <!-- </div> -->
  </div>
</template>

<script>
export default {
  name: 'CheckIdInfo',
  props: {
    cardInfo: Object,
    avatar: String
  },
  data() {
    return {
      showCalendar: false,
    }
  },
  methods: {
    onConfirm(date) {
      this.cardInfo.birth = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
      this.showCalendar = false;
    },
    onSubmit() {
      let that = this;
      this.axios.put('/business/ztBdPerson/updatePersonByIdCard', this.cardInfo).then((res) => {
        if(res.data.success) {
          this.$nextTick(() => {
            that.$emit('checkOk')
          })
        }else {
          // this.$toast(res.data.message);
          this.$router.push({
            name: 'register',
            params: this.cardInfo
          })
        }
      })
    },
    idCardValidator(val){
      const card15 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$/
      const card18 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      let bo = card15.test(val) || card18.test(val);
      if (bo){
        if (parseInt(val.substr(16, 1)) % 2 == 1){
          this.cardInfo.gender = '1';
        }else {
          this.cardInfo.gender = '2';
        }
      }
      return bo
    },
  }
}
</script>

<style>
.check-info {
  position: relative;
  width: 80%;
  margin: 0 auto;
}
.avatar {
  position: absolute;
  z-index: 99;
  width: 20%;
  right: 20px;
  top: 60px;
}
</style>